import * as echarts from '../../ec-canvas/echarts';

Component({
    properties: {
        xData: { type: Array },
        yData: { type: Array },
        yDataSchool: {
            type: Array,
            // 如果你只想单独监听 yDataSchool，也可以，但这里使用 combined observer（下方）更好
        },
    },

    data: {
        ec: { lazyLoad: true }
    },

    lifetimes: {
        ready() {
            // 初始化 chart（只初始化一次）
            // 延迟一点可以确保 canvas 已渲染
            setTimeout(() => {
                this.initChart();
            }, 200);
        }
    },

    // 监听父组件传来的数据变化（当任一属性变化时触发）
    observers: {
        'xData,yDataSchool'(xData, yDataSchool) {
            // 只要 chart 已初始化就更新（否则 initChart 会在 ready 中初始化后自动调用一次 update）
            this.updateChart();
        }
    },

    methods: {
        initChart() {
            const chartComponent = this.selectComponent('#mychart-dom-line');
            if (!chartComponent) {
                console.error('未找到 ec-canvas 组件，检查 id 是否一致 (#mychart-dom-line)');
                return;
            }

            chartComponent.init((canvas, width, height, dpr) => {
                // 保存实例到组件实例上（不要放 data）
                this.chart = echarts.init(canvas, null, {
                    width, height, devicePixelRatio: dpr
                });

                // 初始化后立即尝试用当前数据渲染一次（如果数据还没到也没问题，会使用兜底值）
                this.updateChart();

                // 必须返回 chart 实例
                return this.chart;
            });
        },

        updateChart() {
            // 如果还没初始化 chart，就先不更新（initChart 会在 ready 时初始化）
            if (!this.chart) return;

            // 兜底取 xData 和 yDataSchool，避免 undefined/null 导致报错
            const xData = Array.isArray(this.properties.xData) && this.properties.xData.length
                ? this.properties.xData
                : ['优秀', '良好', '及格', '低分'];

            const yDataSchoolArr = Array.isArray(this.properties.yDataSchool)
                ? this.properties.yDataSchool
                : [];

            // 构造 series 数据，按 xData 的索引对应 yDataSchool 的 value，缺失时用 0
            const seriesData = xData.map((_, i) => {
                const item = yDataSchoolArr[i];
                const v = (item && item.value != null) ? Number(item.value) : 0;
                return v;
            });

            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' },
                    formatter: (params) => {
                        const item = params[0]; 
                        return `${item.axisValue}  ${item.marker}${item.value}%`;
                    }

                },
                legend: {
                    data: ['学校得分率'], 
                    textStyle: { color: '#000', fontSize: 14 }
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: { interval: 0 },
                    boundaryGap: true
                },
                yAxis: { type: 'value' },
                series: [{
                    name: '学校得分率',
                    type: 'bar',
                    data: seriesData,
                    itemStyle: {
                        color: (params) => {
                            const colors = ['#fa6e6e', '#6ecb7a', '#6ea7fa', '#f9d36e'];
                            return colors[params.dataIndex % colors.length];
                        }
                    }
                }]
            };


            // 强制替换（第二参数 true），防止旧的 option 干扰
            this.chart.setOption(option, true);
        }
    }
});
